<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <!--需要在Javascript之前引入JQuer-->
    <script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <!--针对移动设备的样式，为了确保适当的绘制和触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--jquery.cookie.js-->
    <script src="../static/js/jquery.cookie.js"></script>
</head>
<body class="jumbotron">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
             <span style="float: right;">
                 <a href="/content/detail">
                     <span class="glyphicon glyphicon-home"> 首页</span>
                 </a>
             </span>
            <div style="text-align: center;">
                <span class="glyphicon glyphicon-envelope" style="color: rgb(232, 76, 60); font-size: 22px;padding-bottom: 20px;">
                   <trans oldtip=" Envelope" newtip="信封" style="">写文章</trans>
                </span>
            </div>
        </div>
        <div class="col-md-12 column">
            <form class="form-horizontal" role="form" action="/content/add" method="post">
                <div class="form-group" hidden>
                    <label for="cap" class="col-lg-1 control-label" style="text-align: center; font-size: large;">*用户Id</label>
                    <div class="col-lg-11">
                        <input type="text" class="form-control input-lg" id="userid" name="id">
                    </div>
                </div>

                <div class="form-group">
                    <label for="cap" class="col-lg-1 control-label" style="text-align: center; font-size: large;">*标题</label>
                    <div class="col-lg-11">
                        <input type="text" class="form-control input-lg" id="caption" name="hdline" required placeholder="请输入标题，不超过22字，请勿填写特殊符号" title="<font color='red'>警告</font>"
                               data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>内容有误或超过规定字数</h4>">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-lg-1 control-label" style="text-align: center;font-size: large;">*正文</label>
                    <div class="col-lg-11">
								<textarea required class="form-control" name="text" id="content" cols="100" rows="6" placeholder="请输入正文
1、描述尽量简明扼要，过多的修辞、宣泄并不会有助于问题的解决。
2、个人隐私信息，如手机号码、姓名、家庭住址等，请填写在页面下方个人信息备注内容版块内。
3、请勿发布违反管理条例的言论。
4、请勿超过1000字。"        class="textmessage" maxlength="1000" data-container="body" data-toggle="popover" data-html="true" data-animation="true"
                                          data-content="<h4>内容有误或超过规定字数</h4>" title="<font color='red'>警告</font>" ></textarea>
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="" class="col-lg-1 control-label" style="text-align: center; font-size: large;">*用户名</label>
                    <div class="col-lg-5 ">
                        <input type="text" class="form-control input-lg" id="name" name="name" required placeholder="用户姓名"  title="<font color='red'>警告</font>"
                               data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>姓名格式错误</h4>">
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="" class="col-lg-1 control-label" style="text-align: center; font-size: large;">*头像</label>
                    <div class="col-lg-5 ">
                        <input type="text" class="form-control input-lg" id="headpic" name="headpic">
                    </div>
                </div>
                <script>
                    $(function () {
                       var login_userid = $.cookie("userId");
                       $("#userid").val(login_userid);
                       var login_username = $.cookie("login_username");
                       $("#name").val(login_username);
                       var headpic = $.cookie("headpic");
                       if (headpic == ''){
                           $("#headpic").val("user.PNG");
                       }
                       $("#headpic").val(headpic);
                    });
                </script>
                <div class="form-group">
                    <label for="" class="col-lg-1 control-label" style="text-align: center; font-size: large;">*联系邮箱</label>
                    <div class="col-lg-5">
                        <input type="text" name="emil" id="emil" required class="form-control input-lg" required  placeholder="以@qq.com结尾的邮箱号码" title="<font color='red'>警告</font>"
                               data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>号码有误或格式错误</h4>">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-lg-1 control-label" style="text-align: center; font-size: large;">备注</label>
                    <div class="col-lg-11">
								<textarea  class="form-control" name="remark" id="remark" cols="100" rows="6" style=" resize:none;" class="textmessage" placeholder="涉及到姓名、电话、身份证号码、详细地址、联系方式或其他不便公开发表的信息，请填写在此处。
提示：
1、相关信息将不会在留言板上公开展示，仅供人民网工作人员及办理单位核实情况、沟通问题、反馈办理情况使用。
2、请勿超过200字。"              maxlength="200" title="<font color='red'>警告</font>"
                                          data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>内容有误或超过规定字数</h4>"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-5 col-lg-3">
                        <button class="btn btn-primary btn-lg btn-block" type="submit" class="btn btn-default">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        //标题验证
        $("#caption").focus(function(){
            var value1 = $("#caption").val().length;

            if (value1<20 & 0<value1){
                $("#caption").popover('hide');
            }else{
                $("#caption").popover('show');
            }
        }).change(function() {
            $("#caption").popover('hide');
            // $(this).triggerHandler("change");
        }).keyup(function() {
            $(this).triggerHandler("focus");
        });

        //正文验证
        $("#content").focus(function(){
            var value2 = $("#content").val().length;

            if (value2<999 & 5<value2){
                $("#content").popover('hide');
            }else{
                $("#content").popover('show');
            }
        }).change(function() {
            $("#content").popover('hide');
            // $(this).triggerHandler("change");
        }).keyup(function() {
            $(this).triggerHandler("focus");
        });

        //姓名验证
        $("#name").focus(function(){
            var value3 = $("#name").val().length;

            if (value3>10 || value3<1){
                $("#name").popover('show');
            }else{
                $("#name").popover('hide');
            }
        }).change(function() {
            $("#name").popover('hide');
            // $(this).triggerHandler("change");
        }).keyup(function() {
            $(this).triggerHandler("focus");
        });
        //电话号码验证
        $("#emil").focus(function(){
            var value4 = $("#emil").val();

            if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value4))){
                $("#emil").popover('show');
            }else{
                $("#emil").popover('hide');
            }
        }).change(function() {
            $("#emil").popover('hide');
            // $(this).triggerHandler("change");
        }).keyup(function() {
            $(this).triggerHandler("focus");
        });

        //备注验证
        $("#remark").focus(function(){
            var value5 = $("#remark").val().length;

            if (value5>20){
                $("#remark").popover('show');
            }else{
                $("#remark").popover('hide');
            }
        }).change(function() {
            $("#remark").popover('hide');
            // $(this).triggerHandler("change");
        }).keyup(function() {
            $(this).triggerHandler("focus");
        });
        //  表单绑定事件
        $("form").submit(function() {
            $(".form-control").trigger("focus");
            var length = $(".popover ").length;
            if(length > 0) {
                return false;
            }
            //判断是否已经被禁言
            var State = $.cookie("Status")
            if(State == "1"){
                alert("你已经被禁言，请通过联系用户管理人员解除禁言！");
                return false;
            }
            return true;
        });

    });

</script>
</body>
</html>